var P8 = function (game) {

  this.create = function () {

    ClosePage(game, '8_0', '8', '8_r', '8_w');

    function Page(game, cbg, mbg, rbg, wbg) {
      var bg = game.add.sprite(0, 0, mbg);
      bg.anchor.setTo(0, 0);

      var group = game.add.group();
      var bimgs = ['d8_0', 'd8_1', 'd8_2', 'd8_3', 'd8_4', 'd8_5'];
      var originX = 1130;
      var originY = [];
      var tween;
      var drag;
      var rectGroup = game.add.group();
      var xPos = [360, 510, 660, 810, 960, 1110];

      var rectPos = [505, 470, 435, 400, 365];

      var Lbox = game.add.sprite(500, 360, 'Lbox');
      var Rbox = game.add.sprite(900, 360, 'Rbox');
      rectGroup.add(Lbox);
      rectGroup.add(Rbox);
      var L = [], R = [];

      for (var i = 0; i < 6; i++) {
        drag = game.add.sprite(xPos[i], 180, bimgs[i]);
        drag.width = 124;
        drag.height = 124;
        originY.push(160 + i * 35);
        drag.data = i;
        drag.name = i;
        drag.inputEnabled = true;
        drag.input.enableDrag(false, true);
        group.add(drag);
        drag.events.onDragStop.add(fixLocation);
      }


      game.world.bringToTop(group);


      function fixLocation(item) {
        if (item.width > 30) {
          var index = 10;
          var bounds = item.getBounds();

          rectGroup.children.forEach(function (obj, i) {
            var boundsB = obj.getBounds();
            var flag = Phaser.Rectangle.intersects(bounds, boundsB);
            if (flag) {
              index = i;
              if (i === 0) {
                tween = game.add.tween(item).to({
                  x: 370,
                  y: rectPos[L.length],
                  width: 30,
                  height: 30
                }, 300, Phaser.Easing.Linear.None, true);
                L.push(item.data);
              } else {
                tween = game.add.tween(item).to({
                  x: 1200,
                  y: rectPos[R.length],
                  width: 30,
                  height: 30
                }, 300, Phaser.Easing.Linear.None, true)
                R.push(item.data);
              }
              return;
            }
          });
          if (index == 10) {
            tween = game.add.tween(item).to({
              x: xPos[item.data],
              y: 180,
              width: 124,
              height: 124
            }, 300, Phaser.Easing.Linear.None, true);
          }
        } else {
          if (item.x < 500) {
            L = L.filter(function (rect, i) {
              return rect !== item.data;
            });
            L.forEach(function (item, k) {
              var temp = group.getByName(item);
              temp.y = rectPos[k];
            })

          } else {
            R = R.filter(function (rect, i) {
              return rect !== item.data;
            });
            R.forEach(function (item, k) {
              var temp = group.getByName(item);
              temp.y = rectPos[k];
            })
          }


          tween = game.add.tween(item).to({
            x: xPos[item.data],
            y: 180,
            width: 124,
            height: 124
          }, 300, Phaser.Easing.Linear.None, true);
        }

        L=L.sort(function (m,n) {
          return m-n;
        });
      }

      var retry = game.add.button(1080, 625, imgs['button'], onSubmit, this, 2, 1, 0);
      retry.name = 'retry';
      retry.width = 160;
      retry.height = 55;

      var submit = game.add.button(1250, 625, imgs['button'], onSubmit, this, 2, 1, 0);
      submit.name = 'submit';
      submit.width = 160;
      submit.height = 55;


      function onSubmit(arg) {
        L=L.sort(function (m,n) {
          return m-n;
        });
        R=R.sort(function (m,n) {
          return m-n;
        });
        if (arg.name === 'submit') {
          if (L.join('_') == '0_1_2_5' && R.join('_') =='3_4') {
            RightPage(game, cbg, mbg, rbg, wbg);
          } else {
            WrongPage(game, cbg, mbg, rbg, wbg);
          }
        } else {
          game.goState('back');
        }
      }
    }

    function ClosePage(game, cbg, mbg, rbg, wbg) {
      var container = game.add.sprite(0, 0, '');
      var close = game.add.button(0, 0, cbg, onClose, this, 2, 1, 0);
      container.addChild(close);

      function onClose() {
        container.destroy();
        Page(game, cbg, mbg, rbg, wbg);
      }
    }

      function WrongPage(game,cbg,mbg,rbg,wbg){
          var container=game.add.sprite(0,0,'');

          var bg = game.add.image(0, 0, wbg);
          container.addChild(bg);
          var retry = game.add.button(1250, 625, imgs['button'], onClick, this, 2, 1, 0);
          retry.width = 160;
          retry.height = 55;
          container.addChild(retry);

          function onClick() {
              container.destroy();
              Page(game, cbg, mbg, rbg, wbg);
          }
      }

    function RightPage(game, cbg, mbg, rbg, wbg) {
      var container = game.add.sprite(0, 0, '');

      var bg = game.add.image(0, 0, rbg);
      container.addChild(bg);
      var next = game.add.button(1250, 625, imgs['button'], onClick, game, 2, 1, 0);
      next.width = 160;
      next.height = 55;
      container.addChild(next);

      function onClick() {
        game.goState('next');
      }
    }


  };


}
